<script setup lang="ts">
import { ref, defineEmits, getCurrentInstance ,onUnmounted} from "vue"
const { proxy } = getCurrentInstance();
import { useRoute } from 'vue-router'
// const router =useRouter();
const route = useRoute();
const emit = defineEmits(['changeHeaderCSS']);
const changeHeaderCSS = (flag: boolean) => {
  emit('changeHeaderCSS', flag);
}
const cId = route.params.id;
const workCase = ref();
// 拿数据
const getWorkCaseById = async (id) => {
  let result = await proxy.Request({
    url: "/workCase/getWorkCaseById",
    params: {
      id: id
    },
    showLoading: false
  })
  if (!result) {
    return;
  }
  let temp = result.data.caseSynopsis;
  temp.replace(/\\n/gm,"<br/>");
  console.log(temp);
  workCase.value = result.data
  workCase.value.caseSynopsis = temp;
  console.log("---");
  console.log(workCase.value.caseSynopsis);
}
getWorkCaseById(cId);
const underHeader = ref();
// 监听元素是否在可视区域内组件
import { useIntersectionObserver } from '@vueuse/core'
//调用这个函数useIntersectionObserver，里面传三个参数
// 1. stop 是一个函数。如果调用它，就会停止观察（是否进入或移出可视区域的行为）
// 2. target 是观察的目标容器 dom对象 | 组件对象
// 3. isIntersecting 是一个bool值，表示是否进入可视区域。 true表示 进入 false表示 移出\
const { } = useIntersectionObserver(
  underHeader,// target 是vue的对象引用。是观察的目标
  // isIntersecting 是否进入可视区域，true是进入 false是移出
  // observerElement 被观察的dom
  ([{ isIntersecting }]: any) => {
    if (isIntersecting) {
      // 子组件监听进入可视区域调用父组件方法
      //进入可视区域
      changeHeaderCSS(false)
    } else {
      changeHeaderCSS(true);
    }
  },
  // threshold 表示观察的目标进入视口的比例，取值范围是从 0 到 1
  // 默认是0.1。 值越大表示观察越不灵敏
  { threshold: 0.1 }
)
// 等比缩放
//获取整个界面的宽
let browerWidth = window.innerWidth;
//整个界面的宽*0.36 = 高
let bannerHeight = ref(browerWidth * 0.4)
// 浏览器加载时，判断宽度是否大于1200,从而判断头部右侧显示菜单还是图标
const headerNav = ref(browerWidth > 1200);
const listenerReSize = ()=>{
  browerWidth = window.innerWidth;
  // 如果宽度小于1200,头部菜单变为图标
  if (browerWidth < 1200) {
    //头部菜单变为图标
    headerNav.value = false;
    changeHeaderCSS(true)
  } else {
    // 头部图标变为菜单
    headerNav.value = true;
    changeHeaderCSS(false)
  }
  bannerHeight.value = browerWidth * 0.4;
}
window.addEventListener('resize', listenerReSize);
onUnmounted(()=>{
  window.removeEventListener('resize', listenerReSize);
})
</script>

<template>
  <div ref="underHeader"></div>
  <div class="box">
    <!-- 居中显示 -->
    <div class="warpper">
      <!-- 文字简介 -->
      <div class="text" :style="{backgroundColor:workCase.detailCardColor}" v-if="workCase">
        <div class="text-in" :style="{color:workCase.detailTextColor}">
          <el-row>
            <el-col :xs="24" :sm="24" :md="12" class="left t-title">
              {{ workCase.caseTitle }}
            </el-col>
            <el-col :xs="24" :sm="24" :md="12">
              <div class="content">
                <!-- <div class="t-title" v-html="workCase.caseSynopsis" style="white-space: pre-wrap;">
                </div> -->
                <div class="t-title"  style="white-space: pre-wrap;">
                  {{ workCase.caseSynopsis }}
                </div>
                <div class="client">
                  客户名称 : {{ workCase.caseClientName }}<br>
                  服务内容 : {{ workCase.caseContent }}<br>
                  创作日期 : {{ workCase.makeDate }}<br>
                </div>
              </div>
            </el-col>
          </el-row>
          
        </div>
      </div>
      <!-- 全是string -->
      <div v-html="workCase.caseDetail" style="color: black;padding-bottom: 200px;" v-if="workCase">
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.box {
  background-color: rgba($color: #000000, $alpha: 0.02);
  padding-top: 100px;

  .warpper {
    max-width: 1700px;
    margin: 0 auto;

    .text {
      padding: 100px;
      min-height: 700px;
      background: #000;

      .text-in {
        width: 100%;
        min-height: 500px;
        .left{
          flex-grow: 1;
          text-align: center;
        }
        .t-title {
          font-size: 20px;
          line-height: 40px;
        }

        .content {
          flex-grow: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          min-height: 500px;
          position: relative;

          .client {
            top: -40px;
            line-height: 40px;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 1200px) {
  .box .warpper .text{
    padding: 10px;
  }
  .box .warpper .text .text-in .t-title{
    font-size: 16px;
  }
}

</style>